<template>
  <view class="fukubukuro-container">
    <view class="mask-main" :class="openMask ? 'show' : ''" v-if="openMask">
    </view>
    <!-- 领取幸运箱 -->
    <view
      class="show-lucky-card"
      :hidden="!openLuckyBox"
      :class="openLuckyBox ? 'show' : ''"
    >
      <lucky-cardbox
        :details="luckyBoxDetails"
        @hide="hideLuckyCard"
      ></lucky-cardbox>
    </view>

    <!-- 头部 -->
    <nav-bar v-if="graduallyShow.top" :title="bagDetails.lg_name"></nav-bar>
    <!-- 主体内容 -->
    <view class="fukubukuro-content">
      <!-- 轮播图 -->
      <view class="prize-main-cell">
        <prize-main
          v-if="graduallyShow.goodsMain"
          :details="bagDetails"
        ></prize-main>
      </view>
      <!-- 幸运值 箱子 -->
      <view class="lucky-value">
        <lucky-box
          v-if="graduallyShow.lucky"
          @fetch="onFetch"
          :value="luckyValue"
        >
        </lucky-box>

        <!-- 幸运箱子 图片  点击抽取时 自动弹出-->
        <view
          class="box-icon-group"
          v-if="graduallyShow.lucky"
          :class="openLuckyBox ? 'open' : ''"
        >
          <image
            class="box-icon"
            :src="
              $IMG_URL +
              '/uploads/20230427/2367ddeb4323a11097b2eac8e9820a9a.png'
            "
            mode="heightFix"
          />
        </view>
      </view>

      <!-- 系列 等级奖品列表 -->
      <prize-list
        @look="lookDetailsMod"
        v-if="graduallyShow.goodsList"
        :list="bagGoodList"
      ></prize-list>
      <!-- 额外按钮 -->
      <other-btn
        @other-btn="onOtherBtn"
        class="other-btn"
        v-if="graduallyShow.borderButtonDis"
      >
      </other-btn>
      <!-- 抽奖按钮 -->
      <lottery-group
        @lottery="onLottery"
        :extractable="extractable"
        v-if="graduallyShow.lotteryShow"
      ></lottery-group>
      <!-- 展开按钮 -->
      <unfold-btn :active-id="initiallyId" @unfold="onUnfold"></unfold-btn>
    </view>
    <!-- 开奖记录 -->
    <lottery-records
      :initially-id="initiallyId"
      @change-history-mod="changeHistoryMod"
      v-if="lotteryRecordsModOpen"
    ></lottery-records>

    <!-- 抽奖结果 -->
    <view :hidden="!lotteryResultOpen">
      <lottery-result
        :fakeList="bagGoodList.list"
        :show="lotteryResultOpen"
        :result-list="lotteryResultList"
        @again="onAgain"
        @close="onLotteryResultClose"
      ></lottery-result>
    </view>

    <!-- 规则 -->
    <rules
      :details="explain"
      v-if="explainOpen"
      @change-rules-mod="changeRulesMod"
    ></rules>
    <prop-cards :initially-id="initiallyId"></prop-cards>

    <!-- 分享 -->
    <shopro-share v-model="showShare" posterType="user"></shopro-share>
    <shopro-pay-model
      @change-pay-mod="changePayMod"
      @result="onDrawResults"
      @payed="onPayed"
      :history="payHistory"
      v-if="payModOpen"
      activity-type="luckybag"
      :protocol="initiallyId"
      :details="payDetails"
    ></shopro-pay-model>
    <!-- 款式详情 -->
    <details
      :product-id="productId"
      @change-details-mod="changeDetailsMod"
      v-if="productDetails"
    ></details>
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>
<script>
// 工具类
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import share from '@/shopro/share';
import { mapActions, mapMutations, mapGetters } from 'vuex';
////////
// 组件

import NavBar from '../components/navbar.vue';
import OtherBtn from '../components/other-btn.vue';
import PrizeMain from '../components/prize-main.vue';
import PrizeList from '../components/prize-list.vue';
import LotteryGroup from '../components/lottery-group.vue';
import LotteryRecords from '../components/lottery-records.vue';
import LotteryResult from '../components/lottery-result.vue';
import UnfoldBtn from '../components/unfold-btn.vue';
// import ShoproPayModel from '../../../components/shopro-pay-model/shopro-pay-model.vue';
 // import shoprocommoditydetails from '../components/shopro-commodity-details.vue';

 import details from '../components/shopro-commodity-details/shopro-commodity-details.vue';
import LuckyBox from '../components/lucky-box.vue';
import Rules from '../components/rules.vue';
import LuckyCardbox from '../components/lucky-cardbox.vue';
import PropCards from '../components/prop-cards.vue';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  components: {
    NavBar,
    OtherBtn,
    PrizeMain,
    PrizeList,
    LotteryGroup,
    LotteryRecords,
    UnfoldBtn,
    // ShoproPayModel,
    details,
    LuckyBox,
    Rules,
    LotteryResult,
    LuckyCardbox,
    PropCards,
  },
  data() {
    return {
      // 视图渲染
      viewTime: 60,

      // 全局视图展示开关
      graduallyShow: {
        // 顶部展示
        top: false,
        // 商品主体展示
        goodsMain: false,
        // 幸运值
        lucky: false,
        // 商品列表展示
        goodsList: false,
        // 抽奖按钮区展示
        lotteryShow: false,
        // 额外按钮展示
        borderButtonDis: false,
      },
      //幸运宝箱奖品信息
      luckyBoxDetails: {},
      // id
      initiallyId: '',
      // 抽取数量
      rollNum: '',
      // 当前福袋信息
      bagDetails: {
        // 商品轮播图片
        image_list: [],
        // 福袋活动id
        lg_id: '',
        // 福袋名字
        lg_name: '',
      },

      // 福袋列表
      bagGoodList: {
        list: [],
        price: {},
      },
      //当前幸运值
      luckyValue: 0,
      productId: '',
      // 抽取方式
      extractable: {
        single: {
          id: '1',
          name: 'single',
          label: '来一发',
          price: 'xx.xx',
        },
        five: {
          id: '5',
          name: 'five',
          label: '来五发',
          price: 'xx.xx',
        },
        three: {
          id: '3',
          name: 'three',
          label: '来三发',
          price: 'xx.xx',
        },
      },
      // 交易信息
      payDetails: {},
      payHistory: {
        type: '',
      },
      // 奖品结果
      lotteryResultList: [],
      //规则
      explain: '',
      // 开奖记录显示 隐藏
      lotteryRecordsModOpen: false,
      // 支付显示隐藏
      payModOpen: false,
      //商品详情
      productDetails: false,
      //规则显示隐藏
      explainOpen: false,
      //分享 显示隐藏
      showShare: false,
      // 抽奖 结果展示
      lotteryResultOpen: false,
      //遮罩
      openMask: false,
      // 幸运箱开关
      openLuckyBox: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters(['allSkip']),
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e) {
    this.initiallyId = this.$Route.query?.id || e?.id || '';
    this.globalGraduallyShow();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapActions(['changeAllSkip']),
    ...mapMutations(['CartOnshow']),

    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {});
    },

    //继续抽奖 继续欧气
    onAgain() {
      this.lotteryResultOpen = false;
      // this.showTrade = true;
      this.getInfo()
        .then(() => {
          return this.getBagLucky();
        })
        .then(() => {
          return this.getGoodsList();
        })
        .then(() => {
          this.onLottery({
            data: {
              id: this.rollNum,
            },
          });
        })
        .catch(() => {});
    },
    // 关闭 抽奖结果
    onLotteryResultClose() {
      this.lotteryResultOpen = false;
      this.getInfo()
        .then(() => {
          return this.getBagLucky();
        })
        .then(() => {
          return this.getGoodsList();
        })
        .then(() => {})
        .catch(() => {});
    },

    // 对应的执行顺序请求数据
    orderOfExecution() {
      /***
       * 福袋请求操控
       * 初次进来
       * 1 获取 福袋 信息
       * 2 获取幸运值
       * 3 获取福袋列表
       */

      return {
        top: null,
        lotteryShow: null,
        borderButtonDis: null,
        lucky: () => {
          const tim0 = new Date().getTime();
          return new Promise((resolve, reject) => {
            this.getBagLucky()
              .then(() => {
                const tim1 = new Date().getTime();
                resolve({ time: tim1 - tim0, type: true });
              })
              .catch(() => {
                const tim1 = new Date().getTime();
                reject({ time: tim1 - tim0, type: false });
              });
          });
        },
        // 获取 商品列表
        goodsList: () => {
          const tim0 = new Date().getTime();
          return new Promise((resolve, reject) => {
            this.getGoodsList()
              .then(() => {
                const tim1 = new Date().getTime();
                resolve({ time: tim1 - tim0, type: true });
              })
              .catch(() => {
                const tim1 = new Date().getTime();
                reject({ time: tim1 - tim0, type: false });
              });
          });
        },
        // 商品主体
        goodsMain: () => {
          const tim0 = new Date().getTime();
          return new Promise((resolve, reject) => {
            this.getInfo()
              .then(() => {
                const tim1 = new Date().getTime();
                resolve({ time: tim1 - tim0, type: true });
              })
              .catch(() => {
                const tim1 = new Date().getTime();
                reject({ time: tim1 - tim0, type: false });
              });
          });
        },
      };
    },
    // 隐藏 获得宝箱奖品 显示
    hideLuckyCard() {
      if (!this.openLuckyBox) return;
      this.openMask = false;
      this.openLuckyBox = false;

      this.getInfo()
        .then(() => {
          return this.getBagLucky();
        })
        .then(() => {
          return this.getGoodsList();
        })
        .then(() => {})
        .catch(() => {});
    },
    // 获取福袋信息
    getInfo() {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.luckybag',
          {
            id: this.initiallyId,
          },
          '加载中...'
        )
          .then((res) => {
            if (res.code === 1) {
              this.bagDetails = res.data;
              share.setShareInfo({
                title: this.bagDetails.lg_name,
                desc: '',
                image: this.bagDetails.cover_image,
                params: {
                  page: 4,
                  pageId: this.initiallyId,
                },
              });

              //获取 箱子总数
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

    // 获取幸运值
    getBagLucky() {
      return new Promise((resolve, reject) => {
        this.$http('v1.luckybagLucky', {
          id: this.initiallyId,
        })
          .then((res) => {
            if (res.code === 1) {
              this.luckyValue = res.data.current_value;
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

    // 获取福袋列表
    getGoodsList() {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.luckybagGoodsList',
          {
            id: this.initiallyId,
          },
          '请稍等'
        )
          .then((res) => {
            if (res.code === 1) {
              res.data.list = res.data.list.map((item) => {
                item.goods_list = item.goods_list.map((key) => {
                  key.level = item.level;
                  return key;
                });
                return item;
              });
              this.bagGoodList = res.data;

              Object.keys(this.bagGoodList.price).forEach((item) => {
                const ele = this.bagGoodList.price[item];
                this.$set(this.extractable[item], 'price', ele);
              });

              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            reject();
          });
      });
    },
    //领取宝箱
    onFetch() {
      this.$http(
        'v1.luckybagExpendLucky',
        {
          id: this.initiallyId,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.luckyBoxDetails = res.data;
          this.openMask = true;
          this.openLuckyBox = true;
        }
      });
    },

    // 结果
    onDrawResults(ev) {
      this.lotteryResultOpen = true;
      this.payModOpen = false;
      this.lotteryResultList = ev;
    },

    // 支付后的结果
    onPayed(ev) {
      this.payHistory = { type: ev.type };
      let param = {
        id: this.initiallyId,
        order_sn: ev.result.data.order_sn,
        roll_num: this.rollNum,
      };

      // 进行获取奖品
      this.$http('v1.luckybagRoll', param, '请稍等').then((res) => {
        if (res.code === 1) {
          this.onDrawResults(res.data);

          this.CartOnshow(true);
        }
      });
    },

    // 监听点击抽奖
    onLottery(ev) {
      this.rollNum = ev.data.id;
      let params = {
        activity_type: 'luckybag',
        activity_id: this.initiallyId,
        roll_num: this.rollNum,
      };
      this.$http('v1.createOrder', params, '正在创建').then((res) => {
        if (res.code === 1) {
          this.payDetails = {
            ...res.data,
          };
          this.payModOpen = true;
        }
      });
    },

    // 显示隐藏开奖记录
    changeHistoryMod(ev) {
      this.lotteryRecordsModOpen = ev;
    },
    // 显示隐藏支付
    changePayMod(ev) {
      this.payModOpen = ev;
      this.payDetails = {};
    },
    // 显示隐藏 商品详情
    changeDetailsMod(ev) {
      this.productId = '';
      this.productDetails = ev;
    },
    // 查看 商品详情
    lookDetailsMod(ev) {
      this.productId = ev.id;
      this.productDetails = true;
    },
    // 渐序展示视图
    globalGraduallyShow() {
      // 执行列表
      const eventList = this.orderOfExecution();

      // 组件渲染延迟 函数
      const fn = (_ev = () => {}, delay = 800) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            _ev();
            resolve(true);
          }, delay);
        });
      };

      // 视图列表
      const views = Object.keys(this.graduallyShow);
      const len = views.length;

      return new Promise(async (resolve, reject) => {
        // 按顺序 依次执行
        for (let i = 0; i < len; i++) {
          const item = views[i];
          // 延迟60ms
          let t = this.viewTime;
          let result = null;
          if (eventList[item]) {
            // 请求
            try {
              result = await eventList[item]();
              // 请求异步 耗时 耗时大于60ms直接渲染 小于60ms异步差值 渲染
              t = result.time > this.viewTime ? 0 : this.viewTime - result.time;
            } catch (error) {
              result = error;
              t = error.time > this.viewTime ? 0 : this.viewTime - error.time;
            }
          }
          // 执行 延迟函数
          const timeout = await fn(() => {
            let show = true;
            if (result) {
              show = result.type;
            }
            // 渲染
            this.$set(this.graduallyShow, item, show);
            if (i == len - 1) {
              resolve();
            }
          }, t);
        }
      });
    },
    // 获取规则
    getRules() {
      return new Promise((resolve, reject) => {
        if (this.explain) {
          resolve();
          return;
        }
        this.$http(
          'v1.activitysDetails',
          {
            activity_id: this.initiallyId,
            type: 'luckybag',
          },
          '加载中'
        ).then((res) => {
          if (res.code === 1) {
            this.explain = res.data?.content || '';
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    //监听右上角自定义按钮
    onOtherBtn(ev) {
      switch (ev.name) {
        case 'look':
          this.getRules().then(() => {
            this.explainOpen = true;
          });

          break;
        case 'share':
          share.setShareInfo({
            title: this.bagDetails.lg_name,
            desc: '',
            image: this.bagDetails.cover_image,
            params: {
              page: 4,
              pageId: this.initiallyId,
            },
          });
          this.showShare = true;
          break;
        case 'live':
          break;
        case 'up':
          let content = '';
          if (this.allSkip) {
            content = '是否需要开启抽奖动画';
          } else {
            content = '是否需要跳过抽奖动画';
          }
          uni.showModal({
            title: '抽奖动画',
            content,
            showCancel: true,
            cancelText: '取消',
            confirmText: '确定',
            success: (result) => {
              if (result.confirm) {
                this.changeAllSkip(!this.allSkip);
              }
            },
            fail: () => {},
            complete: () => {},
          });

          break;
      }
    },

    // 规则显示隐藏
    changeRulesMod(e) {
      this.explainOpen = e;
    },

    // 监听 扩展按钮 事件
    onUnfold(e) {
      switch (e.type) {
        //音效
        case 'noise':
          break;
        // 开奖记录
        case 'history':
          this.changeHistoryMod(e.status);
          break;
        // 盒柜
        case 'cabinet':
          break;
        // 刷新
        case 'refresh':
          this.onRefreshing();
          break;
      }
    },
    onRefreshing() {
      // 全局视图展示开关
      this.graduallyShow = {
        // 顶部展示
        top: false,
        // 商品主体展示
        goodsMain: false,
        // 幸运值
        lucky: false,
        // 商品列表展示
        goodsList: false,
        // 抽奖按钮区展示
        lotteryShow: false,
        // 额外按钮展示
        borderButtonDis: false,
      };
      this.globalGraduallyShow();
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.fukubukuro-container {
  position: relative;
  width: 100%;
  min-height: 100vh;

  padding-bottom: 200rpx;
  &::before {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        0deg,
        #660ab6 0px,
        #660ab6 2rpx,
        transparent 2rpx,
        transparent 200rpx
      ),
      linear-gradient(
        90deg,
        #660ab6 0px,
        #660ab6 2rpx,
        transparent 2rpx,
        transparent 100rpx
      );
    background-size: 26rpx 26rpx;
    opacity: 0.6;
    z-index: -1;
  }
  &::after {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: -2;
    background: #4604a2;
  }

  .mask-main.show {
    // box-shadow: 0 0 30rpx 1500rpx rgba(0, 0, 0, 0.6) inset;
    animation: scale-in-box-shadow 1s ease-in 0.2s 1 normal forwards;
  }
  .mask-main {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100075;
    transition: all 0.6s;
    opacity: 0.6;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    // box-shadow: 0 0 1rpx 1rpx rgba(0, 0, 0, 0.6) inset;
  }

  .show-lucky-card.show {
    display: flex;
    z-index: 100077;
  }
  .show-lucky-card {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
  }

  .fukubukuro-content {
    position: relative;
    width: 100%;
    min-height: 100vh;

    .lucky-value {
      position: relative;
      margin: 40rpx auto;
      width: 620rpx;
      height: 126rpx;

      min-height: 150rpx;
      transition: all 0.6s;
    }
    .prize-main-cell {
      width: 100%;
      height: 910rpx;
    }
  }
}

.box-icon-group.open {
  --box-poi: absolute;
  z-index: 100076;
  animation: scale-in-box-center 1s ease-in 0s 1 normal forwards;
  .box-icon {
    animation: scale-in-box-center-1 0.8s steps(5, end) 1s 1 normal forwards;
  }
}
.box-icon-group {
  max-width: none;
  /* 箱子 参数 */
  --box-ratio: 0.2;
  --box-i-w: 2500rpx;
  --box-w: 500rpx;
  --box-h: 500rpx;
  --box-poi: absolute;
  --box-r: 4rpx;
  --box-b: 56rpx;
  /* 箱子 参数 end */
  z-index: 5;
  position: var(--box-poi);
  bottom: var(--box-b);
  right: var(--box-r);

  flex-shrink: 0;
  // transition: all 0.6s;
  width: var(--box-w);
  height: var(--box-h);
  overflow: hidden;
  transform-origin: 100% 100% 0;
  transform: translate(0, 0) scale(var(--box-ratio)) rotate(0);

  .box-icon {
    position: absolute;
    transition: all 0.1s;
    max-width: none;
    width: var(--box-i-w);
    height: 100%;
  }
}

@keyframes scale-in-box-shadow {
  0% {
    // box-shadow: 0 0 30rpx 40rpx rgba(0, 0, 0, 0.6) inset;
    opacity: 0.6;
  }
  100% {
    // box-shadow: 0 0 30rpx 1500rpx rgba(0, 0, 0, 0.6) inset;
    opacity: 1;
  }
}
@keyframes scale-in-box-center {
  /* 开始 */
  0% {
    transform: translate(0, 0) scale(var(--box-ratio)) rotate(0);
  }
  30% {
    transform: translate(0, 0) scale(1) rotate(-10deg);
    --box-ratio: 1;
    --box-poi: fixed;
    --box-r: calc(50vw - 300rpx);
    --box-b: calc(50vh - 250rpx);
  }

  40% {
    transform-origin: 50% 50%;
    transform: translate(0, -20rpx) scale(1) rotate(-20deg);
    --box-ratio: 1;
  }
  50% {
    transform-origin: 50% 50%;
    transform: translate(0, -10rpx) scale(1) rotate(0deg);
  }
  60% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scale(1) rotate(15deg);
  }
  66% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scale(1) rotate(-4deg);
  }

  70% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  85% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scaleY(0.6) rotateX(0deg);
  }
  95% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scaleY(1) rotateX(0deg);
  }
  99% {
    transform-origin: 50% 50%;
    transform: translate(0, 0) scaleY(1) rotateX(0deg);
    --box-ratio: 1;
  }
  100% {
    --box-poi: fixed;
    --box-r: calc(50vw - 300rpx);
    --box-b: calc(50vh - 250rpx);
    --box-ratio: 1;
    transform-origin: 50% 50%;
    transform: translate(0, 0) scale(var(--box-ratio)) rotateX(0deg);
  }
}
@keyframes scale-in-box-center-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
